<template>
  <div class="box">
    <div class="left">
      <div class="city" @click="cityListFn">
        <span>{{ city ? city : "深圳" }}</span>
        <van-icon name="arrow-down" size="10" />
      </div>
      <div class="search">
        <van-icon name="search" size="15" color="#9c9fa1" />
        <span>请输入小区或地址</span>
      </div>
    </div>
    <div class="right" @click="mapSkipFn">
      <van-icon name="location-o" size="25" color="#fff" />
    </div>
  </div>
</template>

<script>
import { CityNameApis } from "@/api/home";
export default {
  methods: {
    mapSkipFn() {
      this.$router.push("/map");
    },
    cityListFn() {
      this.$router.push({ path: "/city" });
    },
  },
  data() {
    return {
      city: "",
    };
  },
  async created() {
    // 获取当前城市的定位不传name默认是上海
    await CityNameApis({ name: this.city });
    // localStorage.setItem('hk_city', JSON.stringify(res.data.body))
    if (localStorage.getItem("sel_city")) {
      this.city = JSON.parse(localStorage.getItem("sel_city")).label;
    }
  },
};
</script>

<style scoped>
.box {
  display: flex;
  height: 15px;
  line-height: 15px;
}
.left {
  display: flex;
  padding: 8px 10px;
  color: #333;
  font-size: 14px;
  background-color: #fff;
  width: 240px;
  height: 20px;
  margin: 5px 10px 5px 50px;
  /* margin-left: 50px;
  margin-right: 10px; */
  border-radius: 5px;
}
.city {
  width: 50px;
  text-align: center;
  line-height: 20px;
}
.search {
  flex: 1;
  /* background-color: aqua; */
  line-height: 25px;
  border-left: 1px solid #9c9fa1;
  height: 20px;
  margin-top: -3px;
  padding-left: 10px;
  padding-bottom: 10px;
  line-height: 25px;
}
.search span {
  font-size: 16px;
  color: #9c9fa1;
  padding-left: 6px;
}
.right {
  display: flex;
  margin-top: 8px;
  margin-right: 10px;
}
</style>
